import { Button, message, Modal, Table } from 'antd';
import React, { Component } from 'react';
import { fetchData } from '../../../components/AjaxConsumer';
import Actions from './ActionStore/Actions';
import Query from './Query';

export default class SalesStatistics extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            dataSource: null,
            selectedRowKeys: [],
            selectedRowCount: 0,
            tableLoading: false,
            records: [],
            modalvisible: false,//弹窗visible
            resDataInfo: null//
        };
        //reflux中的监听
        this.unsubscribe = Actions.searchCondition.listen((values) => {
            //将query中的查询条件放到this.par中
            this.values = values
            //并且触发查询
            this.getTableData({ pageSize: '80', current: '1', ...values })
        });
        this.columns = [
            {
                title: '合同号',
                dataIndex: 'contractNo',
                width: '15%',
                //   sorter:(a,b)=>a.proBarcode.substr(a.proBarcode.length-2)-b.proBarcode.substr(a.proBarcode.length-2),
                render(text) {
                    return <span title={text}>{text}</span>
                }
            }, {
                title: '成品型号',
                dataIndex: 'model',
                width: '20%',
                render(text) {
                    return <span title={text}>{text}</span>
                }
            }, {
                title: '需求数量',
                dataIndex: 'demand',
                width: '10%',
            },
            {
                title: '入库数量',
                dataIndex: 'inAmount',
                width: '10%',
                render(text) {
                    return <span title={text}>{text}</span>
                }
            },
            {
                title: '出库数量',
                dataIndex: 'outAmount',
                width: '10%',
                render(text) {
                    return <span title={text}>{text}</span>
                }
            },
            {
                title: '借出数量',
                dataIndex: 'jcAmount',
                width: '10%',
                render(text) {
                    return <span title={text}>{text}</span>
                }
            }, {
                title: '归还数量',
                dataIndex: 'jrAmount',
                width: '10%'
            }, {
                title: '库存数量',
                dataIndex: 'kcAmount',
                width: '10%'
            }
        ];

        this.columnsInfo = [
            {
                title: '合同号',
                dataIndex: 'contractNo',
                width: 150,
            }, {
                title: '原材料型号',
                dataIndex: 'materialCode',
                width: 150
            }, {
                title: '原材料描述',
                dataIndex: 'materialName',
                width: 230
            }, {
                title: '单位',
                dataIndex: 'unit',
                width: 80
            }, {
                title: '需求数量',
                dataIndex: 'demand',
                width: 80
            }, {
                title: '入库数量',
                dataIndex: 'inAmount',
                width: 80
            }, {
                title: '出库数量',
                dataIndex: 'outAmount',
                width: 80
            }, {
                title: '库存数量',
                dataIndex: 'kcAmount',
                width: 80
            }, {
                title: '借出数量',
                dataIndex: 'jcAmount',
                width: 80
            }, {
                title: '归还数量',
                dataIndex: 'jrAmount',
                width: 80
            }
        ]
    }
    //ajax函数
    getTableData = (values) => {
        this.setState({ tableLoading: true })
        let value = {
            wlCode: this.state.wlCode,
            contractNo: this.state.contractNo,
            model: this.state.model,
            productType: this.state.productType,
            barcodeStatus: this.state.barcodeStatus,
            ...values
        };

        //查询时重置选项
        this.setState({
            selectedRowCount: 0,
            selectedRowKeys: []
        })

        //查询条件整理
        const options = {
            url: '/product/insidewarehouse/contractProduct/requirement',
            type: 'post',
            contentType: 'application/json; charset=utf-8',
            condition: JSON.stringify(value),
        };
        //发起请求
        fetchData(this, options, (res) => {

            this.setState({
                loading: false,
                dataSource: res.data,
                tableLoading: false,
                records: []

            });
        }, (res) => {
            this.setState({
                loading: false,
                dataSource: res.data,
                tableLoading: false,
                records: []
            });
        })
    }

    componentDidMount() {
        this.setState({
            selectedRowKeys: [],
            dataSource: null,
            selectedRows: null
        });
    }
    // 组件参数实例化-仅一次
    componentWillMount() {
        this.setState({
            selectedRowKeys: [],
            dataSource: null,
            selectedRows: null
        });
    }

    // 修改属性后刷新-n次
    componentWillReceiveProps(nextProps) {
        if (nextProps.init) {

        }
        let tmpFormData = nextProps.formData;
        let url = nextProps.submitUrl;

        this.setState({
            selectedRowKeys: [],
            selectedRows: null
        });
    }
    handleTableOk = (e) => {
        this.setState({
            modalvisible: false,
        });
    }
    handleTanleCancel = (e) => {
        this.setState({
            modalvisible: false,
        });
    }


    //刷新List列表
    refreshHandle = () => {
        console.log("刷新List列表")
        this.props.refreshHandle();
    }


    showInfo = () => {
        if (this.state.records.length > 1) {
            Modal.info({
                title: '只能选择一行数据',
            });
            return;
        }

        if (this.state.records.length <= 0) {
            Modal.info({
                title: '请选择一行数据',
            });
            return;
        }
        console.log('选中数据model---', this.state.records[0].model);
        let url = '/material/insidewarehouse/RawStorageSn/contractRaw/requirement';
        this.setState({
            urlInfo: url
        })

        const options = {
            url: url,
            type: 'post',
            contentType: 'application/json',
            condition: JSON.stringify({ contractNo: this.state.records[0].contractNo, model: this.state.records[0].model })
        };
        fetchData(this, options, (res) => {
            //回调函数
            if (res.code == 1) {
                this.setState({
                    resDataInfo: res.data,
                    countInfo: res.data.totalCount,
                    modalvisible: true,
                })
            }
        }, (res) => {

        })
    };

    onSelectChange = (selectedRowKeys, record) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'record: ', record);
        this.setState({ selectedRowKeys });
        this.setState({
            records: record
        })
    };

    render() {
        //表格复选框
        const { selectedRowKeys } = this.state;
        const columnsInfo = this.columnsInfo;

        const rowSelection = {
            selectedRowKeys,
            type: 'radio',
            onChange: this.onSelectChange,
            getCheckboxProps: function (record) {
                return {
                    // defaultChecked: record.name === '李大嘴', // 配置默认勾选的列
                    // disabled: record.name === '胡彦祖'    // 配置无法勾选的列
                };
            },
        };

        return (
            <div>
                <Query ref="queryOptions" />
                {

                    <Table
                        rowSelection={rowSelection}
                        columns={this.columns}
                        dataSource={this.state.dataSource}
                        rowKey={row => row.model}
                        showHeader={true}
                        pagination={{ pageSize: '7', size: 'middle' }}
                        size="small"
                        bordered
                        loading={this.state.tableLoading}
                    />
                }
                <div style={{ marginLeft: '10px', paddingBottom: '5px' }}>
                    <span style={{ paddingLeft: '10px' }}>
                        <Button onClick={this.showInfo}>原材料详情</Button>
                    </span>
                </div>

                {/* ---------双击表格弹窗------ */}
                <Modal
                    title="原材料销售详情"
                    style={{ top: '20px' }}
                    width={'1200px'}
                    key={Math.random()}
                    footer={[
                        <Button key="back" type='primary' size="large" onClick={this.handleTanleCancel}>返回</Button>,
                    ]}
                    visible={this.state.modalvisible}
                    onOk={this.handleTableOk}
                    onCancel={this.handleTanleCancel}
                >
                    <div>
                        <Table
                            size={'small'}
                            dataSource={this.state.resDataInfo}
                            columns={columnsInfo}
                            pagination={{ pageSize: '8' }}
                            scroll={{ x: 1010}}
                            //loading={loading}
                            rowKey={'orderId'}
                            bordered
                        />
                    </div>
                </Modal>


            </div>

        )
    }
}